<script setup="">
import {defineEmits, onMounted, ref} from "vue"
import {useRouter} from "vue-router";
import {timeAgo} from "@/util/time.js";
import {ElMessage, ElMessageBox} from "element-plus";
import {adminDeleteTweet} from "@/request/mid_interface.js";
import NewOrEditTweet from "@/components/home/NewOrEditTweet.vue";

const emit = defineEmits([]);

const router = useRouter();

/**
 *  {
 *		"tweet_id": 4,
 *		"article_link": "https://mp.weixin.qq.com/s/9xpg6dmXFT0YGuapNhZrdA",
 *		"cover_image": "https://mmbiz.qpic.cn/mmbiz_jpg/YicUhk5aAGtB2muOLP33Ncl5DwVmrJGELTiasjjJ9TzHaSncQBSicRSuykVLLIwbBHBgC0ibVbHibYicyiaMnMEdHZ8uA/0?wx_fmt=jpeg",
 *		"title": "大模型玩《宝可梦》达人类水平！网友喊话世界冠军：是时候一较高下了",
 *		"post_time": 1707808289755,
 *		"is_sticky": false,
 *		"column_txt": "专栏1",
 *		"read_count": 0,
 *		"create_time": 1707815897,
 *		"update_time": 1707815897
 *	}
 */

const editData = ref({})

let props = defineProps({
  param: {
    type: Object,
    required: true
  }
})

onMounted(() => {
  initEditData()
})

function initEditData() {
  editData.value = props.param
}

function getTimeAgo(timestamp) {
  return timeAgo(timestamp)
}

function refresh() {
  dialogVisible.value = false
  emit('refresh')
}

function deleteTweet() {
  ElMessageBox.confirm(
      '是否要删除此推文？该操作不可撤销',
      '请确认',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        await adminDeleteTweet({
          tweet_id: props.param.tweet_id
        })
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        emit('refresh')
      })
      .catch(() => {
          }
      )
}

const dialogVisible = ref(false)

function openUrl(url) {
  window.open(url, '_blank');
}
</script>

<template>
  <div class="w-full bg-white px-5 py-5 rounded-xl flex" style="">
    <el-dialog v-model="dialogVisible" width="800">
      <NewOrEditTweet @close="dialogVisible=false" @refresh="refresh" :param="param"></NewOrEditTweet>
    </el-dialog>
    <img class="w-20 h-20 rounded object-cover" :src="param.cover_image" alt="">
    <div class="flex-1 ml-5 flex flex-col justify-between">
      <div class="text-black cursor-pointer" @click="openUrl(param.article_link)">{{ param.title }}</div>
      <div class="flex justify-between mt-2.5">
        <div class="text-gray-400" style="font-size: 13px">{{ getTimeAgo(param.post_time) }} · 阅读量 {{
            param.read_count
          }} <span class="" style="color: var(--themeColor)">{{param.is_pinned?"· 已置顶":""}}</span>
        </div>
        <div class="flex items-center">
          <img @click="deleteTweet" class="cursor-pointer select-none ml-2.5 w-6"
               src="@/assets/img/tweet_card/delete.svg" alt="">
          <img @click="dialogVisible=true" class="cursor-pointer select-none ml-2.5 w-6" src="@/assets/img/tweet_card/edit.svg" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
</style>
